<template>
    <div class="body">
        <el-form ref="ruleForm" label-width="130px">
            <el-form-item label="选择优惠券" required>
                <el-select size="medium" v-model="mdl.couponId" placeholder="请选择">
                    <el-option
                    v-for="item in list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发放人群" required>
                <el-radio-group v-model="mdl.giveOutCrowd" @change="changeRadio">
                    <el-radio :label="0">全部用户</el-radio>
                    <!-- <el-radio :label="1">部分用户</el-radio> -->
                </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="发放时间" required >
                <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="mdl.giveOutTime"
                type="datetime"
                placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item> -->
            <el-form-item label="筛选方式" required v-if="radioIndex == 1">
                <el-radio-group v-model="mdl.radio1" @change="changeRadio1">
                    <el-radio :label="1">用户分组</el-radio>
                    <el-radio :label="2">单个用户</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分组" required v-if="radioIndex1 == 1 && radioIndex == 1">
                <el-select size="medium" v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="单个用户" required v-if="radioIndex1 == 2 && radioIndex == 1">
                <el-select size="medium" v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="foot_btn">
            <el-button
                type="primary"
                :loading="submitLoading"
                @click="submitForm('ruleForm')"
            >提交</el-button>
            <!-- <el-button @click="handleCloseDrawer">取消</el-button> -->
        </div>

        <el-table
          ref="listData"
          style="margin-top: 50px"
          :data="ffList"
        >
          <!-- <el-table-column prop="couponName" label="优惠券名称" /> -->
          <el-table-column prop="couponType" label="优惠券类型">
            <template slot-scope="scope">
              {{scope.row.couponType==0?'指定金额券':scope.row.couponType==1?'区间折扣券':'满减券'}}
            </template>
          </el-table-column>
          <el-table-column prop="couponContent" label="优惠券内容"/>
          <el-table-column prop="giveOutCrowd" label="发放对象">
            <template slot-scope="scope">
              {{scope.row.giveOutCrowd==0?'全部用户':'满减券'}}
            </template>
          </el-table-column>
          <el-table-column prop="giveOutTime" label="发放时间" />
          <el-table-column label="发放状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status==0">待发放</el-tag>
              <el-tag type="success" v-if="scope.row.status==1">进行中</el-tag>
              <el-tag type="info" v-if="scope.row.status==2">已完成</el-tag>
              <el-tag type="info" v-if="scope.row.status==3">已取消</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="150">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status==0" size="mini" type="text" @click="cancel(scope.row)"
                >取消发放</el-button
              >
            </template>
          </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getCouponList,giveOutCoupon,getGiveOutCouponPage,cancelGiveOutCoupon } from '@/api/user'
export default {
  name: 'FormModel',
  props: {
    mdl: {
      type: Object,
      required: true
    },
    handleCloseDrawer: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      submitLoading: false,
      uploadData: null,
      imgList: [],

      list:[],

      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }],
        radioIndex:0,
        radioIndex1:0,
        ffList:[],
        ffQuery:{
          current:1,
          size:10
        }
    }
  },
  mounted() {
    
  },
  methods: {

    // 取消发放
    cancel(row){
      console.log(row)
      
      const that = this
        that.$confirm("确定取消该优惠券发放？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          cancelGiveOutCoupon({
            id: row.id,
          }).then((res) => {
            if (res.statusCode === "00000") {
              that.fafangList();
            }
          });
        })
        .catch(() => {});
    },

    async youhuiList(){
      await getCouponList().then(res=>{
        if (res.statusCode === '00000') {
          this.list = res.data
        }
      })
    },

    async fafangList(){
      await getGiveOutCouponPage(this.ffQuery).then(res=>{
        if (res.statusCode === '00000') {
          this.ffList = res.data.records
        }
      })
    },

    // 单选切换
    changeRadio(index){
      console.log(index)
        this.radioIndex = index
    },

    // 单选切换
    changeRadio1(index){
      console.log(index)
        this.radioIndex1 = index
    },
    
    // 提交
    submitForm() {
        if (this.mdl.id) {
            this.mdl.roomId = this.mdl.id
        }

        console.log(this.mdl)
        const request = this.mdl.id ? updateFeedbackOptions(this.mdl) : giveOutCoupon(this.mdl)
        request.then((res) => {
            if (res.statusCode === '00000') {
                this.$message({ message: '提交成功', type: 'success' })
                this.fafangList()
                // 关闭弹窗
                // this.handleCloseDrawer()
                // 调用父级组件刷新数据
                // this.$emit('getList')
            }else{
              this.$message.error(res.message);
            }
        })
        .catch((error) => {
          this.$message({ message: error.message, type: 'warning' })
          console.log(error)
        })
        .finally(() => {
        })
    }
  },
  mounted(){
    this.youhuiList()
    this.fafangList()
  }
}
</script>

<style lang="less" scoped>
.body {
  padding-right: 25px;
  .foot_btn{
    width:150px;
    margin-left:50px;
  }
}

/deep/ .el-checkbox__label {
  font-size: 12px;
}
</style>
